<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 第一屏 -->
<th:block th:fragment="index-img">
    <th:block th:if="${theme.config.top.above.enable_above}">
        <div class="pl-container">
            <th:block th:if="!${theme.config.top.above.enable_above_video}">
                <div class="pl-img pl-blur pl-visible"></div>
                <div class="pl-img pl-visible"></div>
                <video class="video"></video>
            </th:block>
            <th:block th:if="${theme.config.top.above.enable_above_video}">
                <video class="index-video" id="index-video" autoplay=""
                       th:src="${theme.config.top.above.index_video}" loop="" muted="" playsinline=""
                       webkit-playsinline=""
                       style="display:block;object-fit:cover;width:100%;height:100%;pointer-events:none;">
                </video>
            </th:block>
        </div>

        <div id="site-info">
            <h1 id="site-title">[[${site.title}]]</h1>
            <div id="site-subtitle">
                <span id="subtitle"></span>
                <span class="typed-cursor" aria-hidden="true"></span>
            </div>
        </div>
        <div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>

        <link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css' + theme_version}">

        <style>
            #site-title {
                width: max-content;
                max-width: 100%;
                position: relative;
                color: rgba(255, 255, 255, 0);
                animation: 1.5s linear 1s 1 normal both running show;
                margin: 0px auto !important;
            }

            #site-title::after {
                content: "";
                position: absolute;
                left: 0px;
                margin: auto;
                border-radius: 12px;
                top: 11px;
                height: 55px;
                width: 110%;
                animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
            }

            @media screen and (max-width: 768px) {
                #site-title::after {
                    background: rgb(255, 255, 255) !important;
                }
            }

            @media screen and (max-width: 768px) {
                #site-subtitle::after {
                    background: rgb(255, 255, 255) !important;
                }
            }

            #site-subtitle {
                width: 100%;
                max-width: 100%;
                position: relative;
                animation: 1.5s linear 1s 1 normal both running show;
                margin: 0px auto !important;
            }

            #site-subtitle::after {
                content: "";
                position: absolute;
                left: 0px;
                right: 0px;
                margin: auto;
                border-radius: 12px;
                height: 100%;
                width: 0%;
                animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
            }

            @keyframes color_change {
                0% {
                    background: rgb(255, 255, 255);
                }

                100% {
                    background: var(--xlfd-main);
                }
            }

            @-webkit-keyframes color_change {
                0% {
                    background: rgb(255, 255, 255);
                }

                100% {
                    background: var(--xlfd-main);
                }
            }

            @-webkit-keyframes swipe_box {
                0% {
                    left: 0px;
                    width: 0%;
                }

                50% {
                    left: 0px;
                    width: 100%;
                }

                100% {
                    left: 100%;
                    width: 0%;
                }
            }

            @keyframes swipe_box {
                0% {
                    left: 0px;
                    width: 0%;
                }

                50% {
                    left: 0px;
                    width: 100%;
                }

                100% {
                    left: 100%;
                    width: 0%;
                }
            }

            @-webkit-keyframes swipe_box2 {
                0% {
                    left: 0px;
                    width: 0%;
                }

                50% {
                    left: 0px;
                    width: 80%;
                }

                100% {
                    left: 0px;
                    width: 0%;
                }
            }

            @keyframes swipe_box2 {
                0% {
                    left: 0px;
                    width: 0%;
                }

                50% {
                    left: 0px;
                    width: 80%;
                }

                100% {
                    left: 0px;
                    width: 0%;
                }
            }

            @-webkit-keyframes show {
                0% {
                    color: rgba(255, 255, 255, 0);
                    text-shadow: transparent 2px 3px 10px;
                }

                81% {
                    color: rgba(255, 255, 255, 0);
                }

                100% {
                    color: rgb(255, 255, 255);
                }
            }

            @keyframes show {
                0% {
                    color: rgba(255, 255, 255, 0);
                    text-shadow: transparent 2px 3px 10px;
                }

                81% {
                    color: rgba(255, 255, 255, 0);
                }

                100% {
                    color: rgb(255, 255, 255);
                }
            }

            .pl-img {
                background-image: url([[${theme.config.top.above.index_img}]]);

            }

            @media screen and (max-width: 768px) {
                .pl-img {
                    background-image: url([[${theme.config.top.above.phone_index_img}]]);
                }
            }

            .typed-cursor {
                opacity: 1;
            }

            .typed-cursor.typed-cursor--blink {
                animation: typedjsBlink 0.7s infinite;
                -webkit-animation: typedjsBlink 0.7s infinite;
                animation: typedjsBlink 0.7s infinite;
            }

            @keyframes typedjsBlink {
                50% {
                    opacity: 0.0;
                }
            }

            @-webkit-keyframes typedjsBlink {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.0;
                }
                100% {
                    opacity: 1;
                }
            }
        </style>
        <script th:inline="javascript">
            function subtitleType() {
                if([[${theme.config.top.above.enable_typed_random}]]){
                    fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
                        {
                            const e = "出自 " + t.from;
                            const n = [[${theme.config.top.above.typed}]].map((item) => {
                                return item.realNode.text;
                            });
                            n.push(t.hitokoto, e), window.typed = new Typed("#subtitle", {
                                strings: n,
                                startDelay: 300,
                                typeSpeed: 100,
                                loop: !0,
                                backSpeed: 50
                            })
                        }
                    }))
                }else{
                    const n = [[${theme.config.top.above.typed}]].map((item) => {
                        return item.realNode.text;
                    });
                    window.typed = new Typed("#subtitle", {
                        strings: n,
                        startDelay: 300,
                        typeSpeed: 100,
                        loop: !0,
                        backSpeed: 50
                    })
                }
            }
            // 防止加载文字太短时第一个自定义文字显示不出来
            setTimeout(()=>{
                "function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
            },1800)
        </script>
    </th:block>
</th:block>

</html>